@import '../custom.less';

@bulletin-board-prefix-cls: ~'@{css-prefix}bulletin-board';
@tabs-prefix-cls: ~'@{css-prefix}tabs';
@svg-prefix-cls: ~'@{css-prefix}svg';

.@{bulletin-board-prefix-cls} {
  &__item {
    @apply mb-6;

    .@{bulletin-board-prefix-cls}__textTitle {
      @apply block;
      @apply text-color-text-primary;
      @apply ~'mb-0.5';
      @apply text-xs;
      @apply whitespace-normal;
      font-family: Helvetica, Arial, 'microsoft yahei';
      line-height: initial;

      &,
      &:hover {
        @apply no-underline;
      }
    }

    .@{bulletin-board-prefix-cls}__textDate {
      @apply text-color-text-secondary;
      @apply text-xs;
      @apply mt-2;
    }
  }

  &__title {
    @apply text-xl;
    @apply pt-3 pr-0 pb-6 pl-0;
    @apply text-color-text-primary;
    @apply font-bold;
    @apply m-0;
  }

  &__more {
    @apply text-right;

    & &-link {
      @apply text-color-brand;
      @apply text-xs;
      @apply leading-normal;
      @apply inline-flex;
      @apply justify-center;
      @apply items-center;

      .@{svg-prefix-cls} {
        @apply fill-color-brand;
        @apply text-sm;
        @apply ml-1;
      }

      &:hover {
        @apply no-underline;

        .@{svg-prefix-cls} {
          @apply fill-color-brand;
        }
      }
    }
  }

  &__new {
    @apply bg-color-error;
    @apply text-color-text-inverse;
    border-radius: 10px;
    min-width: 30px;
    min-height: 20px;
    @apply leading-5;
    @apply text-xs;
    @apply inline-block;
    @apply box-border;
    @apply text-center;
    @apply mr-1;
    @apply py-0 px-2;
  }

  .@{css-prefix}tabs {
    .@{tabs-prefix-cls}--left,
    .@{tabs-prefix-cls}--right,
    .@{tabs-prefix-cls}__content,
    .@{tabs-prefix-cls}__nav-scroll,
    .@{tabs-prefix-cls}__nav-wrap {
      @apply overflow-hidden;
    }

    .@{tabs-prefix-cls}__header {
      .@{tabs-prefix-cls}__nav-wrap {
        @apply -mb-px;
        @apply relative;

        &:after {
          @apply content-[''];
          @apply absolute;
          @apply left-0;
          @apply bottom-0;
          @apply w-full;
          @apply h-px;
          @apply bg-color-bg-6;
          @apply ~'z-[1]';
        }

        &.is-scrollable {
          @apply py-0 px-5;
          @apply box-border;
        }
      }

      .@{tabs-prefix-cls}__nav {
        @apply top-px;
      }
    }

    .@{tabs-prefix-cls}__nav {
      @apply whitespace-nowrap;
      @apply relative;
      @apply transition-transform duration-300;
      @apply float-left;
      @apply ~'z-[2]';
    }

    .@{tabs-prefix-cls}__item {
      @apply leading-9;
      @apply h-9;
      @apply py-0 px-6;
      @apply box-border;
      @apply inline-block;
      @apply list-none;
      @apply text-sm;
      @apply font-medium;
      @apply text-color-text-primary;
      @apply relative;

      &:focus,
      &:active {
        @apply outline-0;
      }

      &:hover {
        @apply text-color-brand;
        @apply cursor-pointer;
      }

      &.is-active {
        @apply text-color-brand;
      }

      &.is-disabled {
        @apply text-color-text-disabled;
        @apply cursor-default;
      }

      &.is-closable {
        // 修复自定义标签配置:with-close="true"样式错乱问题
        > div {
          @apply inline-block;
        }

        .icon-close {
          display: initial;
        }
      }

      .icon-close {
        @apply rounded-full;
        @apply text-center;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        @apply ~'ml-[5px]';

        &:before {
          @apply scale-90;
          @apply inline-block;
        }

        &:hover {
          @apply bg-color-bg-6;
          @apply text-color-text-inverse;
        }
      }

      &::before {
        @apply bottom-0;
        @apply !top-auto;
        @apply !left-auto;
      }
    }

    .@{tabs-prefix-cls}__content {
      @apply pt-3 pr-6 pb-6 pl-6;
    }

    &:not(.@{tabs-prefix-cls}--card) {
      .@{tabs-prefix-cls}__content {
        @apply py-6 px-0;
      }
    }

    &.@{tabs-prefix-cls}--card {
      .@{tabs-prefix-cls}__header {
        .@{tabs-prefix-cls}__nav {
          @apply border-none;
        }

        .@{tabs-prefix-cls}__item {
          border-left: none;
        }
      }

      > .@{tabs-prefix-cls}__header {
        @apply border-b border-b-color-border;

        .@{tabs-prefix-cls}__item {
          @apply border-b border-b-transparent;
          transition:
            color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
            padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

          &:first-child {
            border-left: none;
          }

          &.is-active {
            @apply border-b-color-bg-1;

            &.is-closable {
              @apply pl-6;
              @apply pr-6;
            }

            &:before {
              @apply absolute;
              @apply content-[''];
              @apply w-full;
              height: 3px;
              @apply bg-color-brand;
              @apply -ml-6;
            }
          }
        }
      }
    }
  }
}
